<template>
  <div class="wrap">
    <div class="header">
      <div class="iconfont back-icon" @click="back">&#xe6b1;</div>
      <div class="header-left">我的发布</div>
    </div>


    <div class="block"></div>

    <div class="thingbox" v-if="show" v-for="(item,index) in tour" :key="item.tour_id">
      <div class="username">
        <img :src="item.image" alt="">
        <p class="name">{{item.username}}</p>
        <p class="price">{{item.tour_title}}</p>
      </div>
      <div class="swiper-box">
          <div class="show">
            <img class="imgbig" :src="item.tour_picture" alt="">
          </div>
      </div>
      <div class="detail">
        <p class="desc">{{item.tour_content}}</p>
      </div>
      <div class="bottom">
        <div class="kind">类别：景点</div>
        <div class="time">发布时间：{{item.tour_time}}</div>
      </div>
      <div class="operate">
        <div class="del" v-if="show" @click="del(item.tour_id)">删除发布</div>
      </div>
    </div>



    <div v-if="hide" class="nothingbox">
      <div class="nothing">
        <img src="../../../assets/images/fishing.png" alt="">
        <p class="warn">还没有发布推荐哦</p>
        <p class="fabu" @click="fabu">发布推荐</p>
    </div>
        </div>

  </div>
</template>
<script>
    import axios from 'axios'
    import {MessageBox} from 'mint-ui'
    export default {
        data() {
            return {
                show: true,
                hide: false,
                image:'',
                username:'',
                tour_title:'',
                tour:[],
                tour_picture:'',
                tour_content:'',
                tour_time:'',
                swiperOption: {
                    slidesPerView: 'auto',
                    spaceBetween: 100
                }
            }
        },
        mounted () {
            axios.get('/api/tour/index1.html')
                .then((res) => {
                    console.log(res);
                    this.tour = res.data.data;
                    this.noFabu()
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        methods: {
            back() {
                this.$router.push({path: '/personal'})
            },
                del (eno) {
                    MessageBox.confirm('确定要删除你的发布吗？').then(
                        (action) => {
                                axios.get('/api/tour/del.html?no=' + eno)
                                    .then((res) => {
                                        console.log(res);
                                        let i = this.tour.findIndex(item => item.tour_id === eno);
                                        this.tour.splice(i, 1)
                                    })
                                    .catch((err) => {
                                        console.log(err);
                                    });
                        }
                    )

                },
                fabu () {
                    this.$router.push({path: '/fabu'})
                },
                noFabu () {
                    if(Array.from(this.tour).length===0){
                        this.show = false
                        this.hide = true
                    }else{
                        this.show = true
                        this.hide = false
                    }
                }
            }
        }
</script>
<style lang="css" scoped>
  .header {
    background-color: #00bcd4;
    line-height:50px;
    color:lightyellow;
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }
  .back-icon {
    font-size:20px;
    margin-top:-4px;
    margin-left:-20px;
  }
  .header-left {
    font-size:20px;
    text-align:center;
  }
  .wrap {
    width: 100%;
    height: 100vh;
    background-color: #f7f7f7;
    overflow-y: scroll;
  }
  .head {
    width: 100%;
    height: 4.4rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .header-icon{
    width: 3rem;
    height: 3rem;
  }
  .title {
    flex: 1;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
  }
  .block{
    height: 50px;
  }
  .thingbox {
    width: 95%;
    height: 349px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    background-color: #fff;
    margin: 0 auto;
    margin-top: 13px;
  }
  .nothingbox{
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nothing {
    width: 20rem;
    height: 20rem;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nothing img {
    width: 5rem;
    height: 5rem;
  }
  .nothing .warn {
    margin: .6rem 0;
    font-size: 1.4rem;
    color: #888;
  }
  .nothing .fabu{
    color: #000;
    padding: .4rem .8rem;
    box-sizing: border-box;
    background-color: #ffda44;
  }
  .username {
    display: -webkit-flex;
    display: flex;
    font-size: 1.4rem;
    height: 5rem;
    /*line-height: 5rem;*/
    align-items: center;
    padding: 0rem 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #f6f6f6;
  }
  .username img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: -39px;
    margin-bottom: 163px;
  }
  .name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    padding-left: 15px;
    margin-bottom: 166px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 center;
  }
  .price {
    color: red;
    font-size: 15px;
    margin-right: -37px;
    margin-bottom: 161px;
  }
  .detail {
    width: 100%;
    margin-top: .6rem;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  /*.swiper-slide{*/
  /*  width: 10rem!important;*/
  /*  height: auto;*/
  /*  padding: 1rem .6rem .6rem .6rem;*/
  /*  box-sizing: border-box;*/
  /*  margin-bottom: .4rem;*/
  /*}*/
  .imgbig{
    width: 140px;
    height: 150px;
    margin-top: -191px;
  }
  .detail .desc{
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-left: -41px;
    margin-top: -35px;
  }
  .bottom{
    display: -webkit-flex;
    display: flex;
    height: 4rem;
    line-height: 30px;
    padding: 0 1.2rem;
    box-sizing: border-box;
    color: #17abe3;
    border-bottom: 1px solid #f6f6f6;
  }
  .kind {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: -49px;
    margin-top: 7px;
  }
  .time{
    margin-right: -49px;
    margin-top: 7px;
  }
  .operate {
    width: 100%;
    height: 4rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;

  }
  .del {
    width: 60px;
    height: 20px;
    text-align: center;
    border: 1px solid #00bcd4;
    border-radius: 1.4rem;
    color: #00bcd4;
    position: absolute;
    right: 13px;
    padding: 3px 4px;
  }
</style>
